<template>
    <div class="check-statement" id="print-me">
        <div class="check-title">
            <h3 class="list-title fl">维修结算单详情</h3>
            <Button @click="print" :loading='btnLoading' class="print-btn fr" type="primary">打印</Button>
        </div>
        <div class="check-list">
            <!-- <Form v-for="(v,i) in formBase" :key='i' :data='formData' ref="form" inline class="list-content">
                <section>
                    <p v-if="v.title" class="">{{v.title}}</p>
                    <FormItem :label="v.content.key+'  :'" :prop='countDate'>{{v.content.data}}</FormItem>
                </section>
            </Form> -->
            <Form ref="form" inline class="list-content">
                <section class="sect">
                    <div class="content">
                        <FormItem label="维修结算日期  :">{{formData.countDate}}</FormItem>
                        <FormItem label="维修结算单编号  :">{{formData.countNo}}</FormItem>
                    </div>
                </section>
                <section class="sect">
                    <p class="sect-title">车辆信息</p>
                    <div class="content">
                        <FormItem label="车牌号码  :">{{car.planNo}} </FormItem>
                        <FormItem label="车架号/VIN号  :">{{car.VINCode}} </FormItem>
                        <FormItem label="发动机号码  :">{{car.engineNum}} </FormItem>
                        <FormItem label="车辆类型  :">{{car.carType}} </FormItem>
                        <FormItem label="车辆品牌  :">{{car.carBrand}} </FormItem>
                        <FormItem label="车辆所有人  :">{{car.carOwner}}</FormItem>
                    </div>
                </section>
                <section class="sect">
                    <p class="sect-title">送修信息</p>
                    <div class="content">
                        <FormItem label="送修日期  :">{{repair.repairDate}} </FormItem>
                        <FormItem label="送修里程  :">{{repair.repairMile}} </FormItem>
                        <FormItem label="送修人姓名  :">{{repair.repairMan}} </FormItem>
                        <FormItem label="送修人联系电话  :">{{repair.repairPhone}} </FormItem>
                        <FormItem label="故障信息  :" class="faultDetail">{{repair.repairReason}} </FormItem>
                    </div>
                </section>
                <section class="sect">
                    <p class="sect-title">出厂信息</p>
                    <div class="content">
                        <FormItem label="出厂日期  :">{{output.ouputDate}}</FormItem>
                        <FormItem label="出厂里程  :">{{output.outputMile}}</FormItem>
                    </div>
                </section>
                <section class="sect">
                    <p class="sect-title">工时费明细</p>
                    <Table :data="timeworkData" :columns="timeworkTableCol" stripe></Table>
                </section>
                <section class="sect">
                    <p class="sect-title">材料费明细</p>
                    <Table :data="materialDetailData" :columns="materialTableCol" stripe></Table>
                </section>
                <section class="sect">
                    <p class="sect-title">其他费用明细</p>
                    <Table :data="otherDetailData" :columns="otherTableCol" stripe></Table>
                </section>
                <section class="sect">
                    <p class="sect-title">质保期</p>
                    <div class="content">
                        <FormItem label="质量保证时间  :">{{formData.qualityTime}}</FormItem>
                        <FormItem label="质量保证里程  :">{{formData.qualityMile}}</FormItem>
                    </div>
                </section>
                <section class="sect">
                    <p class="sect-title">总费用</p>
                    <div class="content">
                        <FormItem label="应收费用  :">{{formData.shouldPaid}}</FormItem>
                        <FormItem label="实收费用  :">{{formData.realPaid}}</FormItem>
                    </div>
                </section>
            </Form>
        </div>
    </div>
</template>

<script>
import print from './../../../commons/js/print.js'
export default {
    data() {
        return {
            btnLoading: false, // 打印加载中
            id: '', // router传入参数
            // 表格样式
            // formBase: [
            //     {
            //         content: [
            //             { key: '维修结算日期', data: formData.countDate },
            //             { key: '维修结算单编号', data: formData.countNum },
            //         ]
            //     },
            //     {
            //         title: '车辆信息',
            //         list: false,
            //         content: [
            //             { key: '车牌号码', data: formData.carNo },
            //             { key: '车架号/VIN号', data: formData.VINCode },
            //             { key: '车辆品牌', data: formData.carBrand },
            //             { key: '车辆类型', data: formData.carType },
            //             { key: '发动机号码', data: formData.engineNo },
            //             { key: '车辆所有人', data: formData.carOwner },
            //         ]
            //     },
            // ],
            // worktableData: [{ // table数据
            //     sheetNum: '',
            //     plateNo: '',
            //     repairType: '',
            //     countDate: '',
            //     finishDate: '',
            //     uploadDate: '',
            // }],
            // 工时费明细
            // timeworkSum: 0
            timeworkTableCol: [ // 设置参数
                {
                    type: 'index',
                    title: '序号',
                    width: 80,
                    align: 'center'
                },
                {
                    title: '维修项目',
                    key: 'fixProgram',
                    align: 'center',
                },
                {
                    title: '工时（人·时）',
                    key: 'workingTime',
                    width: 200,
                    align: 'center'
                },
                {
                    title: '工时单价（元/人·时）',
                    key: 'workingTimeUnit',
                    width: 200,
                    align: 'center'
                },
                {
                    title: '金额（元）',
                    key: 'price',
                    width: 180,
                    align: 'center',
                },
            ],
            timeworkData: [ // 渲染数据
                {
                    fixProgram: '12341234',
                    workingTime: '',
                    workingTimeUnit: '',
                    price: ''
                }
            ],

            // 材料费明细
            // materialSum: 0,
            materialTableCol: [ // 设置参数
                {
                    type: 'index',
                    title: '序号',
                    width: 80,
                    align: 'center'
                },
                {
                    title: '材料名称',
                    key: 'materialName',
                    align: 'center',
                },
                {
                    title: '配件编码',
                    key: 'partsCode',
                    width: 240,
                    align: 'center',
                },
                {
                    title: '品牌',
                    key: 'brand',
                    width: 100,
                    align: 'center',
                },
                {
                    title: '数量',
                    key: 'count',
                    width: 150,
                    align: 'center',
                },
                {
                    title: '单价（元）',
                    key: 'unitPrice',
                    width: 230,
                    align: 'center',
                },
                {
                    title: '金额（元）',
                    key: 'materialPrice',
                    width: 180,
                    align: 'center',
                },
            ],
            materialDetailData: [ // 渲染数据
                {
                    materialName: '',
                    partsCode: '',
                    brand: '',
                    count: '',
                    unitPrice: '',
                    materialPrice: '',
                }
            ],

            // 其他明细
            // otherSum: 0,
            otherTableCol: [ // 设置参数
                {
                    type: 'index',
                    title: '序号',
                    width: 80,
                    align: 'center'
                },
                {
                    title: '项目',
                    key: 'program',
                    align: 'center',
                },
                {
                    title: '金额（元）',
                    key: 'otherPrice',
                    width: 180,
                    align: 'center',
                },
            ],
            otherDetailData: [ // 渲染数据
                {
                    program: '',
                    otherPrice: 0,
                }
            ],
            // 表格数据
            formData: {
                countDate: '', // 维修结算日期 
                countNo: '', // 维修结算单编号
                // 质保期
                qualityTime: '', // 质量保证时间
                qualityMile: '', // 质量保证里程
                // 总费用
                shouldPaid: '', // 应收费用
                realPaid: '', // 实收费用
            },

            // 车辆信息
            car: {
                planNo: '', // 车牌号码
                planNo: '', // 车架号/VIN号
                planNo: '', // 发动机号码
                planNo: '',// 车辆类型
                planNo: '',// 车辆品牌
                carOwner: '', // 车辆所有人
            },
            // 送修信息
            repair: {
                repairDate: '', // 送修日期
                repairMile: '', // 送修里程
                repairMan: '', // 送修人姓名
                repairPhone: '', // 送修人联系电话
                repairReason: '12341234123412341234123412341234111111111111111111111111111144444444444444444444444444444444444444444' // 故障信息
            },
            // 出厂信息
            output: {
                ouputDate: '', // 出厂日期
                outputMile: '' // 出厂里程
            },
            // 工时费明细
            // timeworkSum: 0
            timeworkTableCol: [ // 设置参数
                {
                    type: 'index',
                    title: '序号',
                    width: 80,
                    align: 'center'
                },
                {
                    title: '维修项目',
                    key: 'fixProgram',
                    align: 'center',
                },
                {
                    title: '工时（人·时）',
                    key: 'workingTime',
                    width: 200,
                    align: 'center'
                },
                {
                    title: '工时单价（元/人·时）',
                    key: 'workingTimeUnit',
                    width: 200,
                    align: 'center'
                },
                {
                    title: '金额（元）',
                    key: 'price',
                    width: 180,
                    align: 'center',
                },
            ],
            timeworkData: [ // 渲染数据
                {
                    fixProgram: '12341234',
                    workingTime: '',
                    workingTimeUnit: '',
                    price: ''
                }
            ],
            // 工时费明细
            // timeworkSum: 0
            timeworkTableCol: [ // 设置参数
                {
                    type: 'index',
                    title: '序号',
                    width: 80,
                    align: 'center'
                },
                {
                    title: '维修项目',
                    key: 'fixProgram',
                    align: 'center',
                },
                {
                    title: '工时（人·时）',
                    key: 'workingTime',
                    width: 200,
                    align: 'center'
                },
                {
                    title: '工时单价（元/人·时）',
                    key: 'workingTimeUnit',
                    width: 200,
                    align: 'center'
                },
                {
                    title: '金额（元）',
                    key: 'price',
                    width: 180,
                    align: 'center',
                },
            ],
            timeworkData: [ // 渲染数据
                {
                    fixProgram: '12341234',
                    workingTime: '',
                    workingTimeUnit: '',
                    price: ''
                },
                {
                    fixProgram: '12341234',
                    workingTime: '',
                    workingTimeUnit: '',
                    price: ''
                }
            ],

            // 材料费明细
            // materialSum: 0,
            materialTableCol: [ // 设置参数
                {
                    type: 'index',
                    title: '序号',
                    width: 80,
                    align: 'center'
                },
                {
                    title: '材料名称',
                    key: 'materialName',
                    align: 'center',
                },
                {
                    title: '配件编码',
                    key: 'partsCode',
                    width: 240,
                    align: 'center',
                },
                {
                    title: '品牌',
                    key: 'brand',
                    width: 100,
                    align: 'center',
                },
                {
                    title: '数量',
                    key: 'count',
                    width: 150,
                    align: 'center',
                },
                {
                    title: '单价（元）',
                    key: 'unitPrice',
                    width: 230,
                    align: 'center',
                },
                {
                    title: '金额（元）',
                    key: 'materialPrice',
                    width: 180,
                    align: 'center',
                },
            ],
            materialDetailData: [ // 渲染数据
                {
                    materialName: '',
                    partsCode: '',
                    brand: '',
                    count: '',
                    unitPrice: '',
                    materialPrice: '',
                }
            ],
        }
    },
    // created(){this.id = this.$route.query.id},
    created() { this.id = '58dcb137d66c063288b7c673' },
    mounted() { this.search() },
    methods: {
        // 表格样式
        formBase() {
            return [
                {
                    title: false,
                    content: [
                        { key: '维修结算日期', data: this.formData.countDate },
                        { key: '维修结算单编号', data: this.formData.countNum },
                    ]
                },
                {
                    title: '车辆信息',
                    list: false,
                    content: [
                        { key: '车牌号码', data: this.formData.carNo },
                        { key: '车架号/VIN号', data: this.formData.VINCode },
                        { key: '车辆品牌', data: this.formData.carBrand },
                        { key: '车辆类型', data: this.formData.carType },
                        { key: '发动机号码', data: this.formData.engineNo },
                        { key: '车辆所有人', data: this.formData.carOwner },
                    ]
                },
            ]
        },

        // 列表渲染假数据
        mockTableData() {
            let data = [];
            let len = this.pageSize ? this.pageSize : 10
            for (let i = 0; i < len; i++) {
                data.push({
                    sheetNum: 'testData1230120300000' + Math.floor(Math.random() * 100 + 1),
                    plateNo: 'testData粤ABCC' + Math.floor(Math.random() * 100 + 1),
                    repairType: 'testDataJHDGDPKHDBV129307' + Math.floor(Math.random() * 100 + 1),
                    countDate: new Date(new Date().getTime() - Math.random() * 1000000000).Format("yyyy-MM-dd"),
                    finishDate: new Date(new Date().getTime() - Math.random() * 1000000000).Format("yyyy-MM-dd HH:mm:ss"),
                    uploadDate: new Date(new Date().getTime() - Math.random() * 1000000000).Format("yyyy-MM-dd HH:mm:ss"),
                    _id: 1000 + Math.floor(Math.random() * 10000 + 1),
                })
            }
        },
        // 打印功能
        print() {
            print.init(document.getElementById('print-me'));
        },
        // 获取数据
        search() {
            this.btnLoading = true
            let ajaxData = []
            this.mockTableData()
            this.$ajax(this.$api.statement.detail, { id: this.id }, res => {
                console.log('res', res);
                // console.log('content',res.content);
                // this.goTo('/login');
            }, (error) => {
                // this.goTo('/login');
            })
            this.btnLoading = false
        },

    }
}
</script>

<style lang="less" scoped>
.check-statement {
  height: 1400px;
  //   padding-top: 50px;
  //   margin-bottom: 50px;
  .check-title {
    height: 72px;
    line-height: 72px;
    font-weight: bold;
    vertical-align: middle;
    .list-title {
      width: 50%;
      height: 22px;
      font-size: 16px;
      //   color: rgba(28, 36, 56, 1);
    }
    .print-btn {
      width: 120px;
      height: 32px;
      border-radius: 3px;
      background-color: @color-Primary;
      margin-top: 14px;
    }
  }
  .check-list {
    // background-color: @color-Background;
    background-color: #fff;
    padding: 0 50px 30px 50px;
    .list-content {
      .sect {
        font-size: 18px;
        border-bottom: 1px solid @color-Border;
        padding: 30px 0 10px 0;
        .sect-title {
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 15px;
          //   padding: 8px 0;
        }
        .ivu-form-item {
          width: 275px;
          font-size: 18px;
          margin-bottom: 0px;
        }
        .faultDetail {
          width: 100%;
        }
      }
    }
  }
}
</style>

